import React, { memo, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { RankingItemWrapper } from "./style";
import { getSizeImage } from "@/utils/format-utils";
import { changeTopListIndexAction } from "@/pages/discover/c-pages/ranking/store/actionCreators";
export default memo(function RankingItem(props) {
  const { header, item, index } = props;
  const [topListIndex] = useState(index);
  const { StoreTopListIndex } = useSelector(
    (state) => ({
      StoreTopListIndex: state.getIn(["ranking", "topListIndex"]),
    }),
    shallowEqual
  );
  const dispatch = useDispatch();
  // console.log(topListIndex);
  const changeTopListIndex = () => {
    //console.log(topListIndex);
    dispatch(changeTopListIndexAction(topListIndex));
  };
  return (
    <RankingItemWrapper
      isColor={StoreTopListIndex === topListIndex ? true : false}
    >
      {header}
      <div className="body" onClick={(e) => changeTopListIndex()}>
        <div className="content">
          <div>
            <img src={getSizeImage(item.coverImgUrl, 40)} alt="" />
          </div>
          <div className="title">
            <div className="title-left">{item.name}</div>
            <div className="title-right">{item.updateFrequency}</div>
          </div>
        </div>
      </div>
    </RankingItemWrapper>
  );
});
